<template>
  <div class="ek-page">
    <el-table :data="tableData" border class="table-box" v-loading="loading">
      <el-table-column prop="transport_mode_name" label="运输方式">
        <template v-slot="scope">
          {{ scope.row.transport_mode_name }}
        </template>
      </el-table-column>
      <el-table-column prop="transport_type_name" label="运输类型">
        <template v-slot="scope">
          {{ scope.row.transport_type_name }}
        </template>
      </el-table-column>
      <el-table-column prop="transport_first_price" label="首重价格">
        <template v-slot="scope">
          <el-input
            v-model.number="scope.row.transport_first_price"
            placeholder="输入首重价格"
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="transport_price" label="价格">
        <template v-slot="scope">
          <el-input
            v-model.number="scope.row.transport_price"
            placeholder="输入价格"
          ></el-input>
        </template>
      </el-table-column>
       <el-table-column  label="操作">
        <template v-slot="scope">
            <el-button type="primary" @click="save(scope.row)">保存</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script setup>
import {
  defineComponent,
  onMounted,
  getCurrentInstance,
  ref,
  reactive,
  computed,
  watch,
  defineAsyncComponent,
  markRaw,
  nextTick,
} from "vue";
import { getTransportList, saveTransport } from './api.js'
const {
  appContext: {
    config: { globalProperties },
  },
  proxy: { $nextTick },
} = getCurrentInstance();
const { $ekMessage } = globalProperties;
const loading = ref(false);
const tableData = ref([])

const save = (row) => {
    console.log(row)
    let data = {
        transport_first_price: row.transport_first_price,
        transport_price: row.transport_price,
        transport_mode: row.transport_mode,
        transport_type: row.transport_type,
    }
    if(row.id) {
        data.id = row.id;
    }
    saveTransport(data).then((res)=>{
        if(res.status === 'success') {
            getData();
             $ekMessage.success("操作成功！");
        }
    })
}
const getData = async() => {
       loading.value = true;
  let res =   await getTransportList();
  if(res.status === 'success') {
    tableData.value = res.data.list;
    console.log(tableData.value,'tableDatatableData')
  }
   loading.value = false;
}
onMounted(  () => {
 getData();
})
</script>
<style scope lang="scss">
/* 可以根据需要添加样式 */
.ek-page {
  background-color: #fff;
  border-radius: 8px;
  overflow: hidden;
  width: calc(100% - 40px);
  padding: 20px;
  height: calc(100% - 40px);
  .table-box {
    width: 100%;
  }
}
</style>
